<template>
 <Modal
  :title="title" :fullscreen="true" @on-cancel="isShow=false" v-model="isShow">
  <div class="container-header large">
    <Form class="search" >
      <Row>
        <Col span="8">
          <FormItem>
            <Input v-model="storeName" placeholder="请输入例外名称" @on-enter="getData"/>
          </FormItem>
        </Col>
        <div>
          <Button class="btn-search" type="primary" icon="ios-search" @click="getData(1)"></Button>
        </div>
      </Row>
    </Form>
  </div>
  <Table
    stripe
    :height="options.tableHeight"
    :columns="columns"
    :data="list.data"
    no-data-text="亲，没有找到相关记录哦！~">
  </Table>
  <div class="pager">
    <Page 
      :total="list.totalItem" 
      :current="list.currentPage"
      :page-size="list.pageSize"
      @on-change="onPageChange"
      @on-page-size-change="onPageSizeChange"
      show-sizer 
      placement="top"></Page>
  </div>
  <Loader :status="status" @refresh="getData"></Loader>
  <div slot="footer">
    <Button size="large"  @click="isShow=false">关闭</Button>
  </div>
 </Modal>
</template>
<script>
import listData from "./StoreListData";
export default {
  data() {
    return {
      id: this.$route.query.id,
      type: '0',
      isShow: false,
      list: listData,
      status: 'pass',
      options: {
        tableHeight: 600
      },
      storeName: ''
    }
  },
  mounted() {
    this.list.currentPage = 1
    this.$bus.$on('onEditStore', this.onEditStore)
    this.$bus.$on('onDelete', this.onDelete)
  },
  computed: {
    columns() {
      if (this.type == '0') return this.list.columns
      if (this.type == '1') return this.list.columns1
      if (this.type == '2') return this.list.columns2
    },
    title() {
      let list = {
        '0': '例外门店',
        '1': '例外经销商',
        '2': '例外规格'
      }
      return list[this.type]
    }
  },
  methods: {
    setShowMotal(type) {
      this.isShow = true
      this.type = type
      this.list.data = []
      this.list.currentPage = 1
      if (this.$route.query.id) this.getData()
    },
    getData(type) {
      this.status = 'loading'
      let param = {
        activityId: this.$route.query.id,
        size: this.list.pageSize,
        current: this.list.currentPage,
        storeName: this.storeName
      }
      let url = `/activity/factory_info/exceptional_store/page`
      if (this.type == '1') {
        url = `/activity/factory_info/exceptional_distributor/page`
        param = {
          activityId: this.$route.query.id,
          size: this.list.pageSize,
          current: this.list.currentPage,
          distributorName: this.storeName
        }
      }
      if (this.type == '0' || this.type == '1') {
        this.$ajaxGet(url, param).then(res => {
          this.status = 'pass'
          this.list.data = res.records
          this.list.totalItem = Number(res.total)
        }).catch(() => {  
          this.status = "error"
        })
      }
      if (this.type == '2') {
        url = `/activity/factory_info/sku/exceptional/page`
        param = {
          activityId: this.$route.query.id,
          size: this.list.pageSize,
          current: this.list.currentPage,
          keyword: this.storeName
        }
        this.$ajaxPost(url, param).then(res => {
          this.status = 'pass'
          this.list.data = res.records
          this.list.totalItem = Number(res.total)
        }).catch(() => {  
          this.status = "error"
        })
      }
    },
    onPageChange(number) {
      this.list.currentPage = number;
      this.getData()
    },
    onPageSizeChange(pageSize) {
      this.list.currentPage = 1;
      this.list.pageSize = pageSize;
      this.getData()
    },
    onClickOk() {
      this.$router.push({name: 'sales/bargain/list', query: {id: this.$route.query.id}})
      this.isShow = false
    },
    onClickCancel() {
      this.isShow = false
    },
    onEditStore(row, index) {
      try {
        this.$refs.addStore.setShowMotal(row, index)
      } catch(res) {
      }
      this.$refs.addStore.isShow = true
    },
    onDelete(row) {
      this.$Modal.confirm({
        title: "确认",
        content: `你确定要删除${row.item.storeName}例外${this.type == '0' ? '门店' : '经销商'}`,
        onOk: () => {
          this.$jsonPost(`/activity/factory_info/exceptional_store/delete/${row.item.id}`).then(res => {
            this.getData()
          })
        }
      })
    }
  }
}
</script>